<script setup>
import {store} from "@/store.js";
import {computed,ref,onMounted} from "vue";
import {ElMessage} from "element-plus";
let playBgm = ref(true)
let muteText = ref(false)
const audioRef = ref(null)
let rewards = ref([])

onMounted(() => {
  console.log('store.hits onMounted:')
  console.log(store.hits)
  for (let i = 0; i < store.luckyTokens.length; i++) {
    if (store.hits[i]) {
      rewards.value.push(store.luckyTokens[i])
    }
  }
})

function checkPlayMusic() {
  if (playBgm.value) {
    audioRef.value.play()
  } else {
    audioRef.value.pause()
  }
}

function copyToken(index, row) {
  ElMessage('还没来得及做，先请手动复制一下')
}



</script>

<template>

  <el-row>
    <el-col :span="20">
      <el-text class="mx-1" size="large">奖品列表</el-text>
    </el-col>
    <el-col :span="2">
      <el-text v-show="muteText">静音</el-text>
    </el-col>
    <el-col :span="2">
      <el-switch v-model="playBgm" @change="checkPlayMusic" />
    </el-col>

  </el-row>

  <el-row>
    <el-col>
      <el-text type="primary">前往支付宝，搜索口令红包，输入口令领取</el-text>
    </el-col>
  </el-row>

  <el-table :data="rewards" style="width: 100%" border >
    <el-table-column prop="token" label="口令" width="180" />
    <el-table-column prop="amount" label="金额" width="180" />
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="copyToken(scope.$index, scope.row)">复制</el-button>
      </template>
    </el-table-column>
  </el-table>
  <audio ref="audioRef" @playing="muteText=true" src="http://www.kumeiwp.com/sub/filestores/2021/12/25/baaf9053071391f15920e20d0d87dbfe.mp3" autoplay></audio>

</template>

<style scoped>

</style>